<template>
	<gui-page :fullPage="true" 
	:isLoading="pageLoading" ref="guiPage">
		<view slot="gBody" class="gui-flex1 gui-flex gui-columns" 
		style="background-color:#F8F8F8;">
			<!-- 分类导航 -->
			<view class="header gui-border-b gui-border-box gui-flex gui-columns gui-justify-content-center" 
			id="myheader">
				<gui-switch-navigation :size="180" :currentIndex="currentIndex" 
				activeLineBg="linear-gradient(to right, #F66867,#F66867)" 
				:items="tabs" @change="navchange"></gui-switch-navigation>
			</view>
			<swiper :current="currentIndex" 
			@change="swiperChange" 
			:style="{height:mainHeight+'px', width:'750rpx'}">
				<!-- 轮播项目数量对应 上面的选项标签 -->
				<swiper-item  
				v-for="(items, orderIndex) in orders" :key="orderIndex">
					<!-- 使用滚动区域来实现主体内容区域 -->
					<scroll-view :scroll-y="true"  
						:scroll-top="scrollTops[currentIndex]" 
						:style="{height:mainHeight+'px'}" 
						@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
						@scrolltolower="loadmorefun" @scroll="scroll">
						<!-- 刷新组件 -->
						<gui-refresh @reload="reload" ref="refreshcom"></gui-refresh>
						<gui-empty v-if="items == null">
							<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
								<!-- 请根据您的项目要求制作并更换为空图片 -->
								<image class="gui-empty-img" 
								src="/static/empty.png"></image>
							</view>
							<text slot="text" 
							class="gui-text-small gui-block-text gui-text-center gui-margin-top" style="color:#F66867;">暂无数据</text>
						</gui-empty>
						<!-- 数据展示区域 -->
						<view class="gui-order" v-if="items != null" 
						v-for="(order, oIndex) in items" :key="oIndex">
							
							<view class="gui-flex gui-rows gui-space-between gui-align-items-center">
								<text class="gui-order-number gui-primary-color">订单号 : {{order.order_no}}</text>
								<!-- 订单状态为6 也就是说完成的订单才可以删除 -->
								<text class="gui-icons gui-text-small gui-color-gray" 
								@tap="removeorder(orderIndex, oIndex, order.id)" v-if="order.status == 6 || order.status == 0">&#xe632; 删除订单</text>
							</view>
							<!-- 循环展示订单 -->
							<view>
								<!-- 循环订单商品 -->
								<view class="gui-order-goods gui-flex" 
								v-for="(file, indexFile) in JSON.parse(order.file)" :key="indexFile">
									<view class="gui-order-goods-img" @tap="openImg">
										<gui-image :src="file.url" :width="100" :height="100" :data-url="file.url" ></gui-image>
									</view>
									<text class="gui-order-goods-name" @tap="open()">点击预览</text>
									<text class="gui-order-goods-price">{{file.count}}</text>
								</view>
							</view>
							<!-- 订单底部 -->
							<view class="gui-order-footer gui-flex gui-rows gui-space-between">
								<text class="gui-order-number"> {{order.create_at}}</text>
								<!-- 订单状态为1，2 也就是说没有打印之前的的订单才可以取消 -->
								<text class="gui-order-btn gui-border" 
								v-if="order.status == 1 || order.status == 2 "
								@tap="cancelorder(orderIndex, oIndex, order.id)"
								>取消订单</text>
								<text class="gui-order-btn gui-border gui-order-btn-red">{{orderStatus[order.status]}}</text>
							</view>
						</view>
						<!-- 加载组件 -->
						<gui-loadmore  ref="loadmorecom"></gui-loadmore>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 居中弹出 -->
			<gui-popup ref="guipopup">
				<view class="gui-relative gui-box-shadow gui-img-in">
					<gui-image :src="imgUrl" 
					:width="580"></gui-image>
					<!-- 关闭按钮 -->
					<text class="gui-block-text demo-close gui-icons gui-color-white gui-absolute-rt"
					@tap.stop="close1">&#xe78a;</text>
				</view>
			</gui-popup>
	</gui-page>
</template>
<script>
var graceJs  = require('@/GraceUI5/js/grace.js');
export default {
	data() {
		return {
			// 全屏 loading
			pageLoading      : true,
			// 选项卡标签
			tabs             : [{id:1, name:''}],
			// 选中选项的 索引
			currentIndex     : 0,
			// 核心区域高度 
			mainHeight       : 200,
			// 订单信息保存数组
			orders          : [],
			// 每个选项卡对应的分页
			pages            : [],
			// 每个选项卡内部的滚动区域滚动值
			scrollTops       : [],
			// 滚动延迟
			scrollTimer      : null,
			// 加载更多延迟
			loadMoreTimer    : null,
			// api 加载状态记录
			apiLoadStatus    : [],
			imgUrl:'',
			orderStatus:[
				'已取消','待打印','待处理','打印完成','已发货','待自提','已完成'
			]
		}
	},
	onShow: function() {
		//this.checkLogin()
	},
	onLoad:function(){
		// 01. 获取页面主体高度
		//console.log('onload')
		graceJs.getRefs('guiPage', this, 0, (ref)=>{
			ref.getDomSize('guiPageBody', (e)=>{
				// 主体高度 = 页面高度 - 自定义区域高度
				graceJs.select('#myheader', (e2)=>{
					// 如果自定义区域有 margin 尺寸获取不到请加上这个值，可以利用 uni.upx2px() 转换
					this.mainHeight  = e.height - e2.height;
					// 模拟 api 加载新闻分类
					// 实际开发时此处改成 api 请求即可
					this.tabs = [
						//0全部订单,1待打印,2待处理,3打印完成,4已发货,5待自提,6已完成
						{id:0, name:'全部订单'},
						{id:1, name:'待打印'},
						{id:2, name:'待处理'},
						{id:3, name:'打印完成'},
						{id:4, name:'已发货'},
						{id:5, name:'待自提'},
						{id:6, name:'已完成'},
					];
					// 初始化新闻列表数组 元素数量与分类匹配
					for(var i = 0; i < this.tabs.length; i++){
						this.orders.push([]);
						this.pages.push(1);
						this.scrollTops.push(0);
						this.apiLoadStatus.push(false);
					}
					
					// 第一次加载数据
					this.getOrders();

				});
			});
		});
	},
	watch:{
		currentIndex : function (nVal, oldVal) {
			if(this.orders[nVal] == null){
				return ;
			}
			if(this.orders[nVal].length < 1){ 
				this.getOrders(); 
			}
		}
	},
	methods: {
		// 分类切换
		navchange:function (e) { 
			//console.log(e)
			this.currentIndex = e; 
		},
		// 轮播切换
		swiperChange : function (e) { 
			this.currentIndex = e.detail.current;
		},
		// 滚动区域滚动
		scroll:function(e){
			if(this.scrollTimer != null){clearTimeout(this.scrollTimer);}
			this.scrollTimer = setTimeout(()=>{
				this.scrollTops.splice(this.currentIndex, 1, e.detail.scrollTop);
			}, 100);
		},
		// 下拉刷新相关事件绑定
		touchstart : function (e){
			if(this.apiLoadStatus[this.currentIndex]){return ;}
			if(this.scrollTops[this.currentIndex] > 0){return ;}
			this.$refs.refreshcom[this.currentIndex].touchstart(e);
		},
		touchmove : function(e){
			if(this.apiLoadStatus[this.currentIndex]){return ;}
			if(this.scrollTops[this.currentIndex] > 0){return ;}
			this.$refs.refreshcom[this.currentIndex].touchmove(e);
		},
		touchend : function (e) {
			if(this.apiLoadStatus[this.currentIndex]){return ;}
			if(this.scrollTops[this.currentIndex] > 0){return ;}
			this.$refs.refreshcom[this.currentIndex].touchend(e);
		},
		// 刷新事件
		reload : function(){
			this.pages[this.currentIndex] = 1;
			this.$refs.loadmorecom[this.currentIndex].stoploadmore();
			this.getOrders(1);
		},
		// 加载更多事件
		loadmorefun : function(){
			var currentIndex   = this.currentIndex;
			if(this.apiLoadStatus[currentIndex]){return ;}
			// 获取加载组件状态看一下是否还能继续加载
			if(this.$refs.loadmorecom[currentIndex].loadMoreStatus != 0){return ;}
			// 保证触底只执行一次加载
			if(this.loadMoreTimer != null){clearTimeout(this.loadMoreTimer);}
			this.loadMoreTimer =  setTimeout(() => {
				this.$refs.loadmorecom[currentIndex].loading();
				// 此处开启加载动画执行加载数据的函数
				this.getOrders();
			}, 80);
		},
		// 新闻数据读取
		getOrders : function (isReload) {
			// 使用内部变量记录 当前索引，避免加载时用户切换引起的变量变化
			var currentIndex = this.currentIndex;
			//console.log(this.pages[currentIndex]);
			// 更新 api 加载状态
			//console.log(this.apiLoadStatus);
			this.apiLoadStatus.splice(currentIndex, 1, true);
			//console.log(this.apiLoadStatus.splice(currentIndex, 1, true));
			if(this.pages[currentIndex] == 1 && !isReload){this.pageLoading = true;}
			// 当前正在展示的 选项index 为 this.currentIndex
			// 那么分类 id 应该为 this.tabs[this.currentIndex].id
			//console.log('类型 : ' + this.tabs[currentIndex].name + ' 第'+ this.pages[currentIndex] +'页');
			// 组合一个请求地址的 示例
			//var url = "https://www.graceui.com/api/index/orders/"+this.tabs[currentIndex].name+'/'+this.pages[currentIndex];
			let url = "auth.order/get"
			this.$http.request({
				url:url,
				method:"POST",
				withToken:true,
				data:{
					id:this.tabs[currentIndex].id,
					page:this.pages[currentIndex]
				},
				//登录后跳转类型
				navType:"switchTab"
			
			}).then(res=>{
				//console.log(res.list)
				if(this.pages[currentIndex] == 1){
					//console.log(this.orders);
					this.orders.splice(currentIndex, 1 , res.list);
					//console.log(this.orders.splice(currentIndex, 1 , res.list));
				}
				// 之后的加载页
				else{
					this.orders[currentIndex] = this.orders[currentIndex].concat(res.list);
					this.$refs.loadmorecom[currentIndex].stoploadmore();
				}
				if(res.list.length == 0){
					//console.log('empty');
					this.orders.splice(currentIndex, 1 , null);
					this.$refs.loadmorecom[currentIndex].stoploadmore();
				}else if(res.page.current == res.page.pages){
					//console.log('nomore');
					this.$refs.loadmorecom[currentIndex].nomore();
				}
				// 刷新
				if(isReload){
					this.$refs.refreshcom[currentIndex].endReload();
				}
				this.pages[currentIndex]++;
				// 更新 api 加载状态
				this.apiLoadStatus.splice(currentIndex, 1, false);
				this.pageLoading = false;
			}).catch(err=>{
				console.log(err)
				this.pageLoading = false;
			})
		},
		// 删除订单
		// 参数 : orderIndex,   oIndex,  orderId
		//       数组第一层索引   订单索引     订单Id
		removeorder : function (orderIndex, oIndex, orderId) {
			//console.log(orderIndex, oIndex);
			
			uni.showModal({
				title    : "确定要删除吗？",
				complete : (e)=>{
					if(e.confirm){
						// 此处连接可以后端api 删除订单
						this.$http.request({
							url:"auth.Order/remove",
							method:"POST",
							withToken:true,
							data:{
								id:orderId
							}
						}).then(res=>{
							// 删除前端数据
							this.orders[orderIndex].splice(oIndex,1);
							this.orders.splice(oIndex, 1, this.orders[orderIndex]);
						}).catch(err=>{
							console.log(err)
						})
					

						
					}
				}
			})
		},
		// 取消订单
		// 参数 : orderIndex,   oIndex,  orderId
		//       数组第一层索引   订单索引     订单Id
		cancelorder : function (orderIndex, oIndex, orderId) {
			//console.log(orderIndex, oIndex);
			
			uni.showModal({
				title    : "确定要取消吗？",
				complete : (e)=>{
					if(e.confirm){
						// 此处连接可以后端api 取消订单
						this.$http.request({
							url:"auth.Order/cancel",
							method:"POST",
							withToken:true,
							data:{
								id:orderId,
								//变动后的金额
								balance:uni.getStorageSync('balance')
							}
						}).then(res=>{
							// 将前端数据status 改为 0
							console.log(res)
							if(this.orders[orderIndex][oIndex].status == 1 ){
								//将前端的用户余额  换成返还后的余额
								uni.setStorageSync('balance',res.newBalance)
							}
							this.orders[orderIndex][oIndex].status = 0;							
							//this.orders.splice(oIndex, 1, this.orders[orderIndex]);
						}).catch(err=>{
							console.log(err)
						})

						
					}
				}
			})
		},
		openImg : function (e){
			console.log(e)
			this.imgUrl = e.target.dataset.url;
		},
		
		//01 居中弹出
		open : function () {this.$refs.guipopup.open();console.log('22222')},
		close : function () {this.$refs.guipopup.close();},
	}
}
</script>
<style>
.header{padding:15rpx 30rpx; height:100rpx;}
.gui-order{background-color:#FFFFFF; padding:20rpx; margin:25rpx; margin-bottom:0rpx; border-radius:10rpx;}
.gui-order-number{line-height:50rpx; font-size:26rpx; width:300rpx; flex:1;}
.gui-shop{line-height:60rpx; font-size:28rpx; font-weight:bold; color:#333333;}
.gui-order-goods{flex-direction:row; flex-wrap:nowrap; padding-bottom:20rpx;}
.gui-order-goods-img{width:100rpx; height:100rpx;}
.gui-order-goods-name{line-height:40rpx; width:200rpx; flex:1; overflow:hidden; font-size:26rpx; margin-left:20rpx; margin-right:20rpx; color:#333333;}
.gui-order-goods-price{font-size:24rpx; line-height:50rpx; color:#333333; width:150rpx; text-align:right;}
.gui-order-footer{margin-top:2px;}

.gui-order-status{line-height:50rpx; color:#999999; font-size:26rpx; width:100rpx; text-align:center;}
.gui-order-btn{width:150rpx; height:50rpx; line-height:50rpx; color:#999999; font-size:22rpx; text-align:center; border-radius:60rpx; margin-left:20rpx;}
.gui-order-btn-red{border-color:#F66867; color:#F66867;}
</style>